<template>
    <div class="app-container track_wrap">
  
      <!--行程轨迹地图-->
      <div class="track_left">
        <Map :options="mapOptions" ref="maps"/>
      </div>
  
      <div class="track_right ml0">
    
      <span class="time_span">{{ parseTime(timeValue) }}</span>

      <ul class="track_ul">
        <li>
          <label for="">{{ $t("device.center.deviceCode") }}：</label>
          <span>{{ this.info.deviceCode }}</span>
        </li>
        <li>
          <label for="">{{ $t("query.placeholder.dateRange.start") }}：</label>
          <span>{{ info.startTime ? info.startTime : "--" }}</span>
        </li>
        <li>
          <label for="">{{ $t("query.originPosition") }}：</label>
          <span>{{ info.startingPoint ? info.startingPoint : "--" }}</span>
        </li>
        <li>
          <label for="">{{ $t("query.placeholder.dateRange.end") }}：</label>
          <span>{{ info.endTime ? info.endTime : "--" }}</span>
        </li>
        <li>
          <label for="">{{ $t("query.destinationPosition") }}：</label>
          <span>{{ info.endingPoint ? info.endingPoint : "--" }}</span>
        </li>
      </ul>
      <div class="slider">

       <!-- 这个 <span> 元素用于------显示播放图标------，如果 isStart 为 false，
       则显示播放图标。当用户点击播放图标时，会触发 handlePlay 方法。-->
        <span v-if="!isStart" class="el-icon-video-play play_icon" @click="handlePlay"></span>

       <!-- 这个 <span> 元素用于------显示暂停图标------，如果 isStart 为 true，则显示暂停图标。
        当用户点击暂停图标时，会触发 handlePause 方法。-->
        <span v-else class="el-icon-video-pause play_icon" @click="handlePause"></span>

        <el-slider v-model="value1" :step="1" :max="sliderLength" @change="handleSilder">

        </el-slider><el-select @change="handleSilder" v-model="speed" style="width: 60px" size="mini">
          <el-option label="x1" :value="1"></el-option>
          <el-option label="x2" :value="2"></el-option>
          <el-option label="x3" :value="3"></el-option>
          <el-option label="x4" :value="4"></el-option>
          <el-option label="x5" :value="5"></el-option>
        </el-select>

      </div>
    </div>
    </div>
  </template>
  
  <script>
import Map from "@/views/vehicle/position/map.vue";
import dataList from "@/views/Journey/test.json";
import { ridingTrack } from "@/api/vehicle/riding/data"
import { getMapType } from "@/utils/auth";

    export default {
      name: "CyclingTrack",
      components: {
        Map,
      },
      data() {
        return {
          routeParams:{
            startTime:1711333333333,
            endTime:  1711363956506,
            deviceCode:"862990060044020",
            mapType:0,
            travelId:""
          },
          //传给子组件地图的参数
          mapOptions: {
            isJourney: true,
            isTrack: true,
            height: "calc(100vh - 120px)",
            //行程轨迹的gps数组
            trackList: [],
            mapType: "roadmap",
          },
          queryParams: {
            deviceCode: "",
            startTime: 1688030000000,
            endTime: 1688054400000,
          },
          info: {
            deviceCode: '',
            startTime: 0,
            endTime: 0,
            travelId:""
          },
          value1: 0,
          speed: 1,
          isStart: false,
          sliderLength: 0,
          timeValue: "",
          timeout: null,
          animation: null,
          //行程轨迹数组
          tracks: [],
          step: 1,
          loading: false,
          pickerOptions: {
            disabledDate: (time) => {
              if (this.info.startTime) {
                const sixMonthsAgo = new Date(this.info.startTime);
                sixMonthsAgo.setMonth(sixMonthsAgo.getMonth() - 6);
                return time.getTime() < sixMonthsAgo.getTime() || time.getTime() > this.info.startTime.getTime();
              }
            }
          },
        };
      },
  
  
      created() {
        //获取骑行轨迹
        this.getRidingTrack();
                    
        this.info = {
          // "deviceCode": "18123267673",
          // "deviceCode": "18312210294",
          deviceCode: "",
          startTime: "",
          endTime: "",
          travelId:"",
          mapType:null
        }
      },
      methods: {
        getRidingTrack(){
          console.log();
          this.routeParams.startTime = this.$route.query.startTime;
          this.routeParams.endTime = this.$route.query.endTime;
          this.routeParams.deviceCode = this.$route.query.deviveCode;
          this.routeParams.travelId = this.$route.query.travelId;
          this.routeParams.mapType = this.$route.query.mapType;
          ridingTrack(this.routeParams).then(res =>{
              if (res.code != 200) {
                this.$message.error(this.$t("common.message.error"));
                return;
              }
                this.info = res.data;
                this.tracks = res.data.gpsList;
                if (this.tracks.length == 0) {
                  this.$message.error(this.$t("vehicle.position.noGps"));
                  return;
                }
                this.$message.success(this.$t("common.message.success"))
                this.mapOptions.isJourney = true;
                this.mapOptions.trackList = res.data.gpsList.map((item) => {
                  return {lat: item.latitude, lng: item.longitude};
                });
                this.sliderLength = res.data.gpsList.length;
                console.log(res);
          })
        },
        handlePlay() {
          this.isStart = true;
          this.handleMove();
        },
        handlePause() {
          this.isStart = false;
          this.handleMove();
        },
        handleSilder(val) {
          this.isStart = true;
          this.handleMove();
        },

        //这里就是点击其开始展示轨迹图的小车
        //控制轨迹图上小车的移动
        handleMove() {
          //行程轨迹数组为0则没有gps
          if (this.tracks.length === 0) {
            this.msgSuccess(this.$t("prompt.noGps"));
            return;
          }
          //进度条的值大于行程轨迹数组长度则停止
          if (this.value1 >= this.tracks.length) {
            this.value1 = 0;
            this.isStart = false;
            // this.timeValue = this.tracks[this.value1].timestamp;
            return;
          }
  
          //如果是谷歌地图。
          if (getMapType() == 1) {
            //设置时间值为轨迹数据中当前点的时间戳。
            this.timeValue = this.tracks[this.value1].timestamp;
            //访问地图组件控制小车移动
            this.$refs.maps.$refs.gmap.handleVehicleMove(this.value1);
            this.value1 += 1;
            let that = this;
            if (this.isStart) {
              that.animation = window.requestAnimationFrame(function () {
                setTimeout(() => {
                  that.handleMove();
                }, 1000);
              });
            }
          }
          else {
            this.timeValue = this.tracks[this.value1].timestamp;
            //访问地图组件控制小车移动
            this.$refs.maps.$refs.Baidu.handleVehicleMove(this.value1);
            this.value1 += 1;
            let that = this;
            if (this.isStart) {
              that.animation = window.requestAnimationFrame(function () {
                setTimeout(() => {
                  that.handleMove();
                }, 1000);
              });
            }
          }
        },
      },
    };
  </script>
  
  <style lang="scss" scoped>
    .track_wrap {
      display: flex;
      height: calc(100vh - 84px);
    }
  
    .track_left {
      flex: 1;
      box-shadow: 0 1px 3px 0 rgb(0 0 0 / 12%), 0 0 3px 0 rgb(0 0 0 / 4%);
    }
  
    .track_right {
      width: 300px;
      box-shadow: 0 1px 3px 0 rgb(0 0 0 / 12%), 0 0 3px 0 rgb(0 0 0 / 4%);
    }
  
    .track_ul {
      padding: 0 10px;
    }
  
    .track_ul li {
      display: flex;
      align-items: center;
  
      label {
        width: 73px;
        font-weight: 500;
        font-size: 14px;
        text-align: right;
      }
  
      .el-input,
      span {
        flex: 1;
        min-width: 0;
        font-size: 14px;
      }
    }
  
    .track_ul li + li {
      margin-top: 20px;
    }
  
    .slider {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 10px;
  
      .play_icon {
        font-size: 24px;
        cursor: pointer;
      }
  
      .el-slider {
        flex: 1;
        margin: 0 10px;
      }
    }
  
    .time_span {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  </style>
  